<script setup lang="ts">
defineOptions({
  name: "gasDetectorStatus"
});

import { ref, reactive, getCurrentInstance } from "vue";
import { Download } from "@px-ui/icons-vue";
import fabBoardModelBoxItem from "../../fabBoardModelBoxItem.vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import { useLabelLayoutRingGraphFn, useGetRingGraphAgOptions } from "@/hooks/useEcharts";
import modelBox from "@/views/common/components/modelBox/index.vue";

const { proxy }: any = getCurrentInstance();

const props = withDefaults(defineProps<{ data: Record<string, any> | null }>(), {
  data: null
});

const loading = defineModel("loading", { type: Boolean, default: false });
const title = ref<string>("侦测器状态统计");
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const options = ref<CommonEcharts.CommonEchartsOption | null>(null);

const init = async () => {
  if (!props.data?.length) {
    loading.value = false;
    return;
  }
  const ec = await echartsComRef.value?.getEcharts();
  const data = props.data
    ?.filter(item => item.name !== "总计")
    ?.map(item => {
      const { name, num: value } = item;
      return { name, value };
    });
  const ag = useGetRingGraphAgOptions(props.data.find(item => item.name === "总计")?.num);
  const colorList = ["#3B82F6", "#35CECB", "#FF5639", "#FABF2B", "#FF0066"];
  options.value = useLabelLayoutRingGraphFn(ec, data, title.value, "", colorList, ag);
  loading.value = false;
};

const downloadHandler = async () => {
  const echartsRef = await echartsComRef.value?.getEcharts();
  proxy.useDownloadEcharts(echartsRef);
};

defineExpose({
  init
});
</script>

<template>
  <modelBox :title="title">
    <template #title>
      <div class="title-right">
        <px-tooltip :disabled="!options" effect="dark" content="导出">
          <px-button type="primary" :disabled="!options" text :icon="Download" @click="downloadHandler" />
        </px-tooltip>
      </div>
    </template>
    <div v-loading="loading" class="gas-detector-status-content">
      <echartsCom ref="echartsComRef" :options="options" />
    </div>
  </modelBox>
</template>

<style lang="scss" scoped>
.gas-detector-status-content {
  width: 100%;
  height: 100%;
}
</style>
